<!--
 * @Description: 告警规则
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-10-11 16:21:58
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <template v-if="show === 1">
      <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
        <div slot="top">
          <el-form :model="filterSearch" label-width="80px" label-position="right">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <!-- 规则类型-->
                <el-form-item label="规则类型">
                  <el-select v-model="filterSearch.ruleType" style="width:100%;" v-adaption>
                    <!-- 严重 主要 次要 警告-->
                    <el-option label="全部" value="ALL"></el-option>
                    <el-option label="告警过滤" value="FILTER"></el-option>
                    <el-option label="告警丢弃" value="DISCARD"></el-option>
                    <el-option label="告警前转" value="FORWARD"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                <!-- 搜索 重置-->
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </el-row>
            </el-row>
          </el-form>
        </div>
        <div slot="bottom">
          <!-- 新增 -->
          <el-button size="medium" type="primary" plain @click="handleAdd" v-power="2">新建</el-button>
        </div>
      </table-bar>
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <!-- 详情 -->
        <el-table-column label="详情" type="expand" width="80">
          <template slot-scope="scope">
            <info :ruleInfo="scope.row" :codeDataList="codeDataList" />
          </template>
        </el-table-column>
        <el-table-column
          label="ID"
          align="center"
          width="100"
          sortable
          prop="id"
          v-if="columns[0].show"
        />
        <!-- 规则名称 -->
        <el-table-column
          label="规则名称"
          align="left"
          min-width="250"
          prop="name"
          show-overflow-tooltip
          v-if="columns[1].show"
        />
        <!-- 类型 -->
        <el-table-column
          label="类型"
          sortable
          align="center"
          width="120"
          prop="type"
          v-if="columns[2].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'FILTER'">告警过滤规则</span>
            <span v-if="scope.row.type === 'DISCARD'">告警丢弃规则</span>
            <span v-if="scope.row.type === 'FORWARD'">告警前转规则</span>
          </template>
        </el-table-column>
        <!-- 系统规则 -->
        <el-table-column
          label="系统规则"
          align="center"
          width="120"
          prop="systemDefined"
          sortable
          v-if="columns[3].show"
        >
          <template slot-scope="scope">
            <span>{{scope.row.systemDefined ? '是' : '否'}}</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" align="center" width="80" prop="state" v-if="columns[4].show">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 'ACTIVE'">
              <i class="i-zy"></i>
              激活
            </span>
            <span v-else>
              <i class="i-yz"></i>
              挂起
            </span>
          </template>
        </el-table-column>
        <!-- 创建人 -->
        <el-table-column
          label="创建人"
          align="center"
          width="100"
          show-overflow-tooltip
          prop="creator"
          v-if="columns[5].show"
        />
        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          align="center"
          width="170"
          sortable
          prop="createTime"
          v-if="columns[6].show"
        >
          <template slot-scope="scope">{{scope.row.createTime | filterTime}}</template>
        </el-table-column>
        <!-- 修改人 -->
        <el-table-column
          label="修改人"
          align="center"
          width="100"
          show-overflow-tooltip
          prop="modifier"
          v-if="columns[7].show"
        />
        <!-- 修改时间 -->
        <el-table-column
          label="修改时间"
          align="center"
          width="170"
          sortable
          prop="modifyTime"
          v-if="columns[8].show"
        >
          <template slot-scope="scope">{{scope.row.modifyTime | filterTime}}</template>
        </el-table-column>
        <!-- 操作 编辑 删除-->
        <el-table-column fixed="right" align="center" label="操作" width="220px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate('edit', scope.row)"
              :disabled="scope.row.state === 'ACTIVE'"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.state === 'ACTIVE'"
            >删除</el-button>
            <el-button
              type="text"
              :style="{color: scope.row.state === 'ACTIVE' ? '#de8f40': '#96da80'}"
              :icon="scope.row.state === 'ACTIVE' ? 'el-icon-video-pause': 'el-icon-video-play' "
              @click="hangUp(scope.row)"
              :disabled="scope.row.systemDefined"
            >{{scope.row.state === 'ACTIVE' ? '挂起' : '激活'}}</el-button>
          </template>
        </el-table-column>
      </tao-table>
    </template>
    <template v-if="show === 2">
      <create @returnBack="returnBack" :codeDataList="codeDataList" :neInfoList="neInfoList"></create>
    </template>
    <template v-if="show === 3">
      <update
        @returnBack="returnBack"
        :ruleInfo="ruleInfo"
        :codeDataList="codeDataList"
        :neInfoList="neInfoList"
      ></update>
    </template>
  </div>
</template>

<script>
import create from './create';
import update from './update.vue';
import info from './info.vue';
export default {
  components: { create, info, update },
  data () {
    return {
      dataList: [],
      filterSearch: {
        ruleType: 'ALL'
      },
      columns: [
        { name: 'ID', show: true },
        { name: '规则名称', show: true },
        { name: '类型', show: true },
        { name: '系统规则', show: true },
        { name: '状态', show: true },
        { name: '创建人', show: true },
        { name: '创建时间', show: true },
        { name: '修改人', show: true },
        { name: '修改时间', show: true }
      ],
      show: 1,
      ruleInfo: {},
      codeDataList: [],
      neInfoList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
      _this.getNeInfo();
      _this.getAllAlarmCode();
    });
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    }
  },
  methods: {
    // 搜索
    search () {
      let _this = this;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.filterSearch = {
        ruleType: 'ALL'
      };
      _this.refresh();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize,
        type: _this.filterSearch.ruleType === 'ALL' ? 'ALL' : _this.filterSearch.ruleType
      };
      _this.$http.post({
        url: '/api/fm/rule/getAllPage',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 获取所有告警码信息
    getAllAlarmCode () {
      let _this = this;
      let params = {
        limit: 1000,
        offset: 0
      };
      _this.$http.post({
        url: '/api/fm/code/allsdwanpage',
        data: params
      }).then(res => {
        let alarmList = [];
        let { status, resultBody } = res;
        if (status === '0') {
          if (resultBody.objects.length > 0) {
            resultBody.objects.map(item => {
              alarmList.push({
                id: item.code,
                label: item.userlabel
              });
            });
            _this.codeDataList = alarmList;
          }
        }
      });
    },
    // 获取所有的网元信息
    getNeInfo () {
      let _this = this;
      _this.$http.post({
        url: '/api/sdwan/ne/queryWithNeType',
        data: {
          type: []
        }
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let neList = [];
          if (resultBody.length > 0) {
            resultBody.map(item => {
              neList.push({
                id: item.id,
                label: item.userlabel,
                disabled: false,
                type: item.type
              });
            });
            _this.neInfoList = neList;
          }
        } else {
          _this.$message.error('获取网元信息失败');
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 新增告警规则
    handleAdd () {
      let _this = this;
      _this.show = 2;
    },
    // 新建告警规则的回调
    returnBack (data) {
      let _this = this;
      _this.show = data;
    },
    // 挂起/激活切换
    hangUp (row) {
      let _this = this;
      row.state = row.state === 'ACTIVE' ? 'SUSPEND' : 'ACTIVE';
      _this.$http.put({
        url: '/api/fm/rule',
        data: row
      }).then(res => {
        if (res) {
          _this.refresh();
        } else {
          _this.$message.error('切换状态失败');
        }
      });
    },
    // 删除告警规则
    handleDelete (row) {
      let _this = this;
      _this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.deleted({
          url: '/api/fm/rule/' + row.id,
        }).then(() => {
          _this.$message.success('删除成功！');
          _this.refresh();
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // 编辑告警规则
    handleUpdate (type, row) {
      let _this = this;
      _this.show = 3;
      _this.ruleInfo = row;
    }
  },
  beforeDestroy () {
    localStorage.removeItem('alarmRule');
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
.i-yz {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de4040;
  position: relative;
  top: 1px;
}
.i-zy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #96da80;
  position: relative;
  top: 1px;
}
.i-cy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e9d426;
  position: relative;
  top: 1px;
}
.i-jg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #86bcdb;
  position: relative;
  top: 1px;
}
</style>